<template>
  <div class="background">
    <titleComponent :index="0" :originName="'traffic'"></titleComponent>
    <div class="content">
      <!-- 左边 -->
      <div class="content_info">
        <!-- 服务区 -->
        <div class="yz-select-server">
          <!-- 下拉框 -->
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in vaildateItems" @click="vaildateClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
        </div>
        <!-- 车型流量 -->
        <div class="content_info_item">
          <contentTitle :title="'车型流量'"/>
          <div class="yz-content-bg">
            <div class="yx-xs-6">
              <div class="yx-car-item car"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-text">
                  小客车
                  <span>{{state.left1Data.xkczb}}</span>
                </div>
                <div class="yx-car-content-num">
                  {{state.left1Data.xkc}}
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item bus"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-text">
                  大客车
                  <span>{{state.left1Data.dkczb}}</span>
                </div>
                <div class="yx-car-content-num">
                  {{state.left1Data.dkc}}
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item smallChart"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-text">
                  小货车
                  <span>{{state.left1Data.xhczb}}</span>
                </div>
                <div class="yx-car-content-num">
                  {{state.left1Data.xhc}}
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item bigChart"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-text">
                  大货车
                  <span>{{state.left1Data.dhczb}}</span>
                </div>
                <div class="yx-car-content-num">
                  {{state.left1Data.dhc}}
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item whp"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-text">
                  危化品
                  <span>{{state.left1Data.whpzb}}</span>
                </div>
                <div class="yx-car-content-num">
                  {{state.left1Data.whp}}
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="yx-car-item otherCar"></div>
              <div class="yx-car-content">
                <div class="yx-car-content-text">
                  其它车
                  <span>{{state.left1Data.qtzb}}</span>
                </div>
                <div class="yx-car-content-num">
                  {{state.left1Data.qt}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 车辆来源地排行 -->
        <div class="content_info_item">
          <contentTitle :title="'车辆来源地排行'"/>
          <div class="yz-content-bg">
            <!-- <div class="yz-process-items">
              <div class="yz-process-item" v-for="(item,index) in state.left2Data.lydph">
                <div class="province">{{item.province}}</div>
                <div class="nums"><countTo :startVal='startVal' :endVal='item.cnt||0' :duration='5000' autoplay="true" :decimals="2"></countTo>万</div>

                <div class="process-parent">
                  <div class="process">
                    <div :style="{width: item.zb}"></div>
                  </div>
                  <div class="rate"><countTo :startVal='startVal' :endVal='item.zb2||0' :duration='5000' autoplay="true"></countTo>%</div>

                </div>
              </div>
            </div> -->

            <div class="yz-process-items">
              <el-carousel ref="carousel" height="200px" direction="vertical" :autoplay="true" style="width: 100%" indicator-position="none" interval="2000"
              hover-stop="true"
              @mouseenter="touchStop"
              @mouseleave="touchStart"
              >
                <el-carousel-item v-for="(items, outerIndex) in lydphGroupTable" :key="outerIndex">
                  <div class="yz-process-item" v-for="(item, innerIndex) in items" :key="innerIndex">
                    <div class="province" style="width: 7vh; ">{{ item.province }}</div>

                    <div class="nums" v-if="item.validatecode === 'day'">
                      <countTo :startVal="startVal" :endVal="item.cnt || 0" :duration="5000" :autoplay="true" :key="item.cnt"/>
                    </div>
                    <div class="nums" v-else>
                      <countTo :startVal="startVal" :endVal="item.cnt || 0" :duration="5000" :autoplay="true" :decimals="2" :key="item.cnt"/>万
                    </div>

                    <div class="process-parent" style="width: 36vh;">
                      <div class="process">
                        <div :style="{ width: item.zb }"></div>
                      </div>
                      <div class="rate">
                        <countTo :startVal="startVal" :endVal="item.zb2 || 0" :duration="5000" :autoplay="true" :decimals="2" />%
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>

        <!-- 年度车流对比 -->
        <div class="content_info_item">
          <contentTitle :title="'车流对比'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="ndcldbRef"></div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow numbg">
            <div class="yz-box-item-colums">
              <div class="yz-box-item-colum" v-for="(item,index) in carFlowZoneOptions" @click="zoneClick(index)">
                <div class="yx-li yx-li-select" v-if="item.selected">{{item.name}}</div>
                <div class="yx-li" v-else>{{item.name}}</div>
              </div>
            </div>
            <div class="car_flow_text">{{ carFlowOptions.carFlowText }}</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in carFlowOptions.carFlowNum">
                <div v-if="isNumeric(item)">
                 <!-- 有背景图，然后把数字拆分  -->
                 <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
                </div>
                <div v-else>
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="car_flow_unit">万辆</div>
          </div>
        </div>
        <!-- 地图数据 -->
        <Map-traffic :data="mapData.data" :showLabel="mapData.showLabel" :parenHandler="parenHandler"></Map-traffic>
        <!-- 下面legend -->
        <div class="map-legend">
          <div class="map-legend-item" title="车流排行第1名">
            <el-image :src="top1"></el-image>
            <span>第1名</span>
          </div>
          <div class="map-legend-item" title="车流排行第2名">
            <el-image :src="top2"></el-image>
            <span>第2名</span>
          </div>
          <div class="map-legend-item" title="车流排行第3名">
            <el-image :src="top3"></el-image>
            <span>第3名</span>
          </div>
          <div class="map-legend-item" title="车流排行第4名">
            <el-image :src="top4"></el-image>
            <span>第4名</span>
          </div>
          <div class="map-legend-item" title="车流排行第5名">
            <el-image :src="top5"></el-image>
            <span>第5名</span>
          </div>
          <div class="map-legend-item" title="车流排行第6-10名">
            <el-image :src="mapTop3_10Icon"></el-image>
            <span>第6-10名</span>
          </div>
          <div class="map-legend-item" title="">
            <el-image :src="mapOtherIcon"></el-image>
            <span>其他</span>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="content_info">
        <div class="yz-box2-items">
          <div class="yz-box2-item" style="width: 30%">
            <div class="box-top-left"></div>
            <div class="yz-box2-p">{{state.ratioData.ruqulv}} <div class="down"></div> {{state.ratioData.ruqulv_tb}}%</div>
            <div class="yz-box2-p center">入区率</div>
          </div>
          <div class="yz-box2-item" style="width: 20%">
            <div class="yz-box2-p">{{state.ratioData.kehuobi}}</div>
            <div class="yz-box2-p center">客货比</div>
          </div>
          <div class="yz-box2-item" style="width: 30%">
            <div class="yz-box2-p">{{state.ratioData.pjtlsj}}</div>
            <div class="yz-box2-p center">平均停留时间</div>
          </div>
          <div class="yz-box2-item" style="width: 20%">
            <div class="yz-box2-p">{{state.ratioData.dcgxd}}</div>
            <div class="yz-box2-p center">单车贡献度</div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'节假日车流分析'"/>
          <div class="yz-content-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs" style="justify-content: flex-end;width: 50vh;">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" data-level="2" v-for="(item,index) in jjrclfx_navs" @click="jjrcfxClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div class="chart" ref="jjrclfxRef"></div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'服务区车流量排行（前10）'"/>
          <div class="yz-content-bg">
            <div class="chart" ref="fwqcllphRef"></div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'当前车流饱和度排行（前10）'"/>
          <div class="yz-content-bg">
            <!-- <div class="yz-common-small-title">
              <div class="yz-common-title-navs top2">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" v-for="(item,index) in dqclbhdph_navs" @click="dqclbhdphClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div> -->
            <div class="chart" ref="dqclbhdphRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <bottom-menu></bottom-menu>


  <traffic-layer :title="layerTitle" :compid="layerId" @closeLayers="closeLayers" v-if="showLayers"></traffic-layer>
</template>
<script setup>
import titleComponent from "./components/title.vue"
import contentTitle from "./components/contentTitle.vue"
import './../assets/content.css'
import {getCurrentInstance, onMounted, ref, reactive, watch, toRaw,onUnmounted,nextTick,onBeforeUnmount} from "vue";
import {drawLine} from "../util/chartUtil.js";
import MapTraffic from "./components/mapTraffic.vue";
import 'dayjs/locale/zh-cn'; // 导入中文语言包
import black_symbol from '../assets/img/yztraffic/4.png';
import black_green from '../assets/img/yztraffic/3.png';
import black_coffic from '../assets/img/yztraffic/1.png';
import black_grey from '../assets/img/yztraffic/2.png';
import {CountTo} from 'vue3-count-to';
import trafficLayer from './components/trafficLayer.vue'
import bottomMenu from './components/bottomMenu.vue';
import {ajaxRequest} from "../api/code.js";
import mapTop3_10Icon from '../assets/img/headquarters/top3-10.png';
import mapOtherIcon from '../assets/img/headquarters/其它.png';
import top1 from "../assets/img/headquarters/top1.png";
import top2 from "../assets/img/headquarters/top2.png";
import top3 from "../assets/img/headquarters/top3.png";
import top4 from "../assets/img/headquarters/top4.png";
import top5 from "../assets/img/headquarters/top5.png";
import top6 from "../assets/img/headquarters/top6.png";
import top7 from "../assets/img/headquarters/top7.png";
import top8 from "../assets/img/headquarters/top8.png";
import top9 from "../assets/img/headquarters/top9.png";
import top10 from "../assets/img/headquarters/top10.png";



//来源地排行
const lydphTable = ref([])
//数据按xx个拆分
function chunkArray(array, chunkSize) {
  let result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}
const lydphGroupTable = ref(chunkArray(lydphTable.value, 6));
const carousel = ref(null)

const chart = getCurrentInstance().proxy.$echarts
const isNumeric = function (value){
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}

const startVal = ref(0);

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])
//ab选择
const abItems = ref([{
  name:"综合",
  selected: true
},{
  name:"东(南)",
  selected: false
},{
  name:"西(北)",
  selected: false
}]);

const areacode = ref(null)

const abClick = function (selectIndex){
  abItems.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    areacode.value = null
  }
  else if(selectIndex === 1){
    areacode.value = "01"
  }
  else if(selectIndex === 2){
    areacode.value = "02"
  }
  //切换分区刷新数据
  refreshData()
}

const validatecode = ref('day')
const vaildateItems = ref([{
  name:"年",
  selected: false
},{
  name:"月",
  selected: false
},{
  name:"日",
  selected: true
}]);
//年月日切换事件
const vaildateClick = function (selectIndex) {
  vaildateItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    validatecode.value = "year"
  }
  else if(selectIndex === 1){
    validatecode.value = "month"
  }
  else if(selectIndex === 2){
    validatecode.value = "day"
  }
  getLeft1Data()
  getLeft2Data()
  getLeft3Data()
  getRigth2Data()
  initMap()
  getPjtlsjData()
  getDcgxd()
}


let timer = null
// 刷新页面数据
watch([areacode],(newVal, oldVal) => {
   if (timer) clearInterval(timer)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})


/* 中间车流量统计 */
const carFlowZoneOptions = ref([{name: '入区数据',selected:true}, {name: '出区数据',selected: false}])
const carFlowOptions = ref({
  position : 0,
  carFlowText: "入区车流量",
  carFlowNum: "0"
})
const zoneClick = function (selectIndex){
  carFlowZoneOptions.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  carFlowOptions.value = {
    position : selectIndex,
    carFlowText : selectIndex ===1 ? "出区车流量" : "入区车流量",
    carFlowNum: "0"
  }
  //更新数据
  getClzsData()
}

const closeLayers = function () {
  showLayers.value = false;
}

/**初始化地图数据**/
const mapData = ref({
      showLabel:false,
      data : [
        {
          title: "承德东服务区（南北区）",
          lng: 118.192523,
          lag: 41.055226,
          item: 1,
          symbol: black_coffic,
          label: '拥堵'
        },
        {
          title: "丰润停车区（南北区）",
          lng: 118.190801,
          lag: 39.802433,
          item: 11234,
          symbol: black_grey,
          label: '繁忙'
        },
        {
          title: "安子岭服务区（南北区）",
          lng: 117.483534,
          lag: 40.853385,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        },
        {
          title: "滦州服务区（南北区）",
          lng: 118.413204,
          lag: 39.852281,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "山海关服务区（南北区）",
          lng: 119.762079,
          lag: 40.031636,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
        ,
        {
          title: "卢龙服务区（南北区）",
          lng: 118.904135,
          lag: 39.923276,
          item: 1134,
          symbol: black_green,
          label: '空闲'
        }
      ]
    }
)

const currentYear = new Date().getFullYear();
    // 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;

//年度车流对比
// const ndcldb_legend = ref([`${lastYear}年`, `${thisYear}年`]);
// const ndcldb_x = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const ndcldb_legend = ref(["昨日", "今日"]);
const ndcldb_x = ref(["00时","01时","02时","03时","04时","05时","06时","07时","08时","09时","10时","11时","12时","13时","14时","15时","16时","17时","18时","19时","20时","21时","22时","23时"])
const ndcldb_y_1 = ref([])
const ndcldb_y_2 = ref([])

const ndcldbRef = ref();
const ndcldbOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ndcldb_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ndcldb_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:1,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "万辆",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: { // 设置轴标签样式
        textStyle: {
          color: 'white' // 设置轴标签颜色
        }
      },
      splitLine: { //网格线：隐藏
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed', // 线型为虚线
        }
      },
    }
  ],
  series: [
    {
      name: ndcldb_legend.value[0],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndcldb_y_1.value
    },
    {
      name: ndcldb_legend.value[1],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(244,69,56,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndcldb_y_2.value
    }
  ]
});

//节假日车流分析
const jjrclfx_legend = ref([`${lastYear}年`, `${thisYear}年`]);
const jjrclfx_x = ref(['1天', '2天', '3天', '4天', '5天', '6天', '7天'])
const jjrclfx_y_1 = ref([140, 232, 101, 264, 90, 340, 250])
const jjrclfx_y_2 = ref([120, 282, 111, 234, 220, 340, 310])
const jjrclfx_navs = ref([{name:'',holidaytypeid:'',selected:false}
])
const jjrcfxClick = function (selectIndex){
  jjrclfx_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  //刷新数据
  getJjrclfx(jjrclfx_navs.value[selectIndex].holidaytypeid)
}


const jjrclfxRef = ref();
const jjrclfxOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: jjrclfx_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: jjrclfx_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "万辆",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: jjrclfx_legend.value[0],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jjrclfx_y_1.value
    },
    {
      name: jjrclfx_legend.value[1],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jjrclfx_y_2.value
    }
  ]
});

//服务区车流量排行
const fwqcllph_x = ref(['滦州服务区'])
const fwqcllph_y = ref([140])

const fwqcllphRef = ref();
const fwqcllphOpt = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    top: '18%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval:0,
      rotate: 25,
      textStyle: {
        color: 'white',
        fontSize: 10
      }
    },
    data: fwqcllph_x
  },
  yAxis: {
    type: 'value',
    name: "万辆",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      data: fwqcllph_y,
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#50E4DF'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});

//当前车流饱和度排行
const dqclbhdph_x = ref(['深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）', '深圳服务区（南区）'])
const dqclbhdph_y = ref([140, 232, 101, 264, 90, 340, 250, 232, 101, 264])
const dqclbhdph_navs = ref([{name:'拥堵',selected:false},{name:'繁忙',selected:false},{name:'空闲',selected:true}])
const dqclbhdph_code = ref("2");
const dqclbhdphClick = function (selectIndex){
  dqclbhdph_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  dqclbhdph_code.value = selectIndex
  //刷新图表
  getRigth3Data()
}

const dqclbhdphRef = ref();
const dqclbhdphOpt = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    top: '15%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval:0,
      rotate: 25,
      align: 'right',
      textStyle: {
        color: 'white',
        fontSize: 10
      }
    },
    data: dqclbhdph_x
  },
  yAxis: {
    type: 'value',
    name: "%",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      data: dqclbhdph_y,
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#029EE1'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});

const curServer = ref("")
//选中服务区
const serverHandleChange = (selectItem) => {
  // console.log(selectItem);
  curServer.value = selectItem ?? ['河北高速燕赵驿行集团有限公司',''];
  getLeft1Data()
  getLeft2Data()
  getLeft3Data()
  getRigth1Data()
  getPjtlsjData()
  getDcgxd()
}

//地图选中服务区
const parenHandler = function (item) {
  curServer.value=['河北高速燕赵驿行集团有限公司',item.compid]
  //刷新数据
  refreshData()
}


const clickBottomTap = function (){
  console.log('点击了底部菜单')
}

let ndcldbChart, jjrclfxChart, fwqcllphChart, dqclbhdphChart;
let timer100;

onMounted(() => {

  ndcldbChart = drawLine(ndcldbRef.value, ndcldbOpt.value);
  jjrclfxChart = drawLine(jjrclfxRef.value, jjrclfxOpt.value);
  fwqcllphChart = drawLine(fwqcllphRef.value,fwqcllphOpt.value);
  dqclbhdphChart = drawLine(dqclbhdphRef.value,dqclbhdphOpt.value);
  getFwqxx()
  //加载数据
  refreshData()
  touchStart();
})

function touchStart(){
  timer100 = setInterval(()=>{
    if (carousel){
      carousel.value.next();
    }
  },5000);
}

function touchStop(){
  clearInterval(timer100);
}

onBeforeUnmount(() => {
  clearInterval(timer100);
});

//加载数据
const refreshData = () => {
  initMap()
  getLeft1Data()
  getLeft2Data()
  getLeft3Data()
  getRigth1Data()
  getRigth2Data()
  getRigth3Data()
  getPjtlsjData()
  getDcgxd()
  autoRefreshData()
}

// 1分钟刷新
const autoRefreshData = () => {
  timer = setInterval(async () => {
    //当日数据时，车型流量自动刷新
    if("day" === validatecode.value){
      initMap()
      getLeft1Data()
      getLeft2Data()
      getLeft3Data()
      getRigth2Data()
      getPjtlsjData()
      // getDcgxd()
    }
  }, 60*1000)
}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}
/****************************地图相关代码start************************************* */
async function initMap() {
  mapData.value.data = []
  const params = {
    areacode: areacode.value,
    validatecode: validatecode.value
  }
  const res = await ajaxRequest('post', 'getCompDataClph', params)
  if (res.data && res.data.length > 0) {
    res.data.forEach((item, index) => {
      let symb = getSymb(index+1)
      mapData.value.data[index] = {
        compid: item.compid,
        title: item.compname,
        lng: item.longitude,
        lag: item.latitude,
        symbol: symb,
        label: "lab"
      };
    })
  }

};

const getSymb = function (num) {
  switch (num) {
    case 1:
      return top1
      break;
    case 2:
      return top2
      break;
    case 3:
      return top3
      break;
    case 4:
      return top4
      break;
    case 5:
      return top5
      break;
    case 6:
      return top6
      break;
    case 7:
      return top7
      break;
    case 8:
      return top8
      break;
    case 9:
      return top9
      break;
    case 10:
      return top10
      break;
    default:
      return mapOtherIcon
  }
}
/****************************地图相关代码end************************************* */


const state = reactive({
  ratioData :{
    kehuobi : "0:0",
    ruqulv : "0%",
    ruqulv_tb : "0",
    pjtlsj:"0分钟",
    pjtlsj_tb:"0",
    dcgxd:"0",
  },
  left1Data :{
    zs:1,
    xkc:0,
    xkczb:'0%',
    dkc:0,
    dkczb:'0%',
    xhc:0,
    xhczb:'0%',
    dhc:0,
    dhczb:'0%',
    whp:0,
    whpzb:'0%',
    qt:0,
    qtzb:'0%'
  },
  left2Data :{
    clzs:10,
    lydph:[
      {
        province:"河北",
        cnt:0,
        zb:"0%"
      }
    ]
  }
})


/**
 * 车型流量
 */
 async function getLeft1Data() {
  const params = {
    compid:curServer.value[1],
    areacode: areacode.value
    ,validatecode : validatecode.value
  }
  const res = await ajaxRequest('post', 'getCxll', params)
  if (res.data) {
    //入区车流总数
    carFlowOptions.value.carFlowNum = res.data.zs ? (res.data.zs/10000).toFixed(2):"0"
    state.left1Data.zs = res.data.zs

    if ('day' === validatecode.value) {
      state.left1Data.xkc = res.data.xkc
      state.left1Data.dkc = res.data.dkc
      state.left1Data.xhc = res.data.xhc
      state.left1Data.dhc = res.data.dhc
      state.left1Data.whp = res.data.whp
      state.left1Data.qt = res.data.qt
    } else {
      state.left1Data.xkc = (res.data.xkc/10000).toFixed(2) + "万"
      state.left1Data.dkc = (res.data.dkc/10000).toFixed(2) + "万"
      state.left1Data.xhc = (res.data.xhc/10000).toFixed(2) + "万"
      state.left1Data.dhc = (res.data.dhc/10000).toFixed(2) + "万"
      state.left1Data.whp = (res.data.whp/10000).toFixed(2) + "万"
      state.left1Data.qt = (res.data.qt / 10000).toFixed(2) + "万"
    }

    state.left1Data.xkczb = res.data.zs ? (res.data.xkc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.dkczb = res.data.zs ? (res.data.dkc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.xhczb = res.data.zs ? (res.data.xhc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.dhczb = res.data.zs ? (res.data.dhc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.whpzb = res.data.zs ? (res.data.whp/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.qtzb = res.data.zs ? (res.data.qt/res.data.zs*100).toFixed(2)+"%" : "0%"

    //客货比
    let kc = res.data.xkc + res.data.dkc
    let hc = res.data.xhc + res.data.dhc
    if((kc+hc) > 0){
      let kczb = (kc/(kc+hc)*10).toFixed(0)
      state.ratioData.kehuobi = kczb +":"+(10-kczb)
    }
  }
}

/**
 * 车辆来源地排行
 */
 let timer99
 async function getLeft2Data() {
  // state.left2Data.lydph=[]
  const params = {
    page:1,
    limit:99,
    compid:curServer.value[1],
    areacode: areacode.value
    ,validatecode : validatecode.value
  }
   const res = await ajaxRequest('post', 'getCllydph', params)
  if (res.data && res.data.clzs && res.data.lydph.length > 0) {
    state.left1Data.clzs = res.data.clzs

    res.data.lydph.forEach((item,index)=>{
      // state.left2Data.lydph[index] = {
      //   province:item.province,
      //   cnt: (item.cnt/10000).toFixed(2),
      //   zb:(item.cnt/res.data.clzs*100).toFixed(2)+"%",
      //   zb2:(item.cnt/res.data.clzs*100).toFixed(2)
      // }
      lydphTable.value[index] = {
        validatecode : validatecode.value,
        province:item.province,
        cnt: validatecode.value === "day" ? item.cnt : (item.cnt/10000).toFixed(2),
        zb:(item.cnt/res.data.clzs*100).toFixed(2)+"%",
        zb2:(item.cnt/res.data.clzs*100).toFixed(2)
      }
    })
    lydphGroupTable.value = chunkArray(lydphTable.value, 6)
    // if (carousel.value) {
    //   let grouplength = lydphGroupTable.value.length
    //   let itemIndex = 0;
    //   if (timer99) {
    //     clearInterval(timer99)
    //   }
    //   timer99 = setInterval(() => {
    //     if (itemIndex == grouplength) {
    //       itemIndex = 0
    //     }
    //     carousel.value.setActiveItem(itemIndex++)
    //   }, 2000)
    // }

    //修改startVal 出现动态效果
    if(startVal.value == 0) {
      startVal.value = 1;
    } else if (startVal.value == 1) {
      startVal.value = 0;
    }


  }
}

/**
 * 年度车流对比
 */
async function getLeft3Data() {
  const params = {
    compid:curServer.value[1],
    areacode: areacode.value
  }

  ndcldb_y_1.value=[]
  ndcldb_y_2.value=[]
  if (validatecode.value == "day") {
    ndcldb_x.value = ["00时","01时","02时","03时","04时","05时","06时","07时","08时","09时","10时","11时","12时","13时","14时","15时","16时","17时","18时","19时","20时","21时","22时","23时"]
    const res = await ajaxRequest('post', 'getSdcldb', params)
    if (res.data) {
      if (res.data.today) {
        res.data.today.forEach(item => {
          ndcldb_y_2.value[parseInt(item.sj)] = item.cnt
        })
      }
      if (res.data.yesterday) {
        res.data.yesterday.forEach(item => {
          ndcldb_y_1.value[parseInt(item.sj)] = item.cnt
        })
      }
      ndcldb_legend.value = ["昨日", "今日"]
      ndcldbOpt.value.legend.data = ndcldb_legend.value
      ndcldbOpt.value.xAxis[0].data = ndcldb_x.value
      ndcldbOpt.value.xAxis[0].axisLabel.interval = 1
      ndcldbOpt.value.yAxis[0].name = "单位：辆"

      ndcldbOpt.value.series[0].name = ndcldb_legend.value[0]
      ndcldbOpt.value.series[1].name = ndcldb_legend.value[1]
      ndcldbOpt.value.series[0].data = ndcldb_y_1.value
      ndcldbOpt.value.series[1].data = ndcldb_y_2.value
      ndcldbChart.setOption(ndcldbOpt.value)
    }

  }
  else if (validatecode.value == "month") {
    ndcldb_x.value = ["01日","02日","03日","04日","05日","06日","07日","08日","09日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日","31日"]
    const res = await ajaxRequest('post', 'getYdcldb', params)
    if (res.data) {
      if(res.data.thismonthdata){
        res.data.thismonthdata.forEach(item=>{
          ndcldb_y_2.value[parseInt(item.sj-1)] = (item.cnt/10000).toFixed(2)
        })
      }
      if(res.data.lastmonthdata){
        res.data.lastmonthdata.forEach(item=>{
          ndcldb_y_1.value[parseInt(item.sj-1)] = (item.cnt/10000).toFixed(2)
        })
      }
      ndcldb_legend.value = ["上月","本月"]
      ndcldbOpt.value.legend.data = ndcldb_legend.value
      ndcldbOpt.value.xAxis[0].data = ndcldb_x.value
      ndcldbOpt.value.xAxis[0].axisLabel.interval = 2
      ndcldbOpt.value.yAxis[0].name = "单位：万辆"
      ndcldbOpt.value.series[0].name = ndcldb_legend.value[0]
      ndcldbOpt.value.series[1].name = ndcldb_legend.value[1]
      ndcldbOpt.value.series[0].data = ndcldb_y_1.value
      ndcldbOpt.value.series[1].data = ndcldb_y_2.value
      ndcldbChart.setOption(ndcldbOpt.value)
    }
  }
  else {
    ndcldb_x.value = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    ndcldb_legend.value = ["上年","本年"]
    ndcldbOpt.value.legend.data = ndcldb_legend.value
    ndcldbOpt.value.xAxis[0].data = ndcldb_x.value
    ndcldbOpt.value.yAxis[0].name = "单位：万辆"
    ndcldbOpt.value.xAxis[0].axisLabel.interval = 0
    ndcldbOpt.value.series[0].name = ndcldb_legend.value[0]
    ndcldbOpt.value.series[1].name = ndcldb_legend.value[1]
    ndcldb_y_1.value = []
    ndcldb_y_2.value = []
    //查询年度数据比较耗时，先清理数据，
    ndcldbOpt.value.series[0].data = ndcldb_y_1.value
    ndcldbOpt.value.series[1].data = ndcldb_y_2.value
    ndcldbChart.setOption(ndcldbOpt.value)

    const res = await ajaxRequest('post', 'getNdcldb', params)
    if (res.data) {
      if (res.data.thisyeardata) {
        res.data.thisyeardata.forEach(item => {
          ndcldb_y_2.value[parseInt(item.month - 1)] = (item.cnt / 10000).toFixed(2)
        })
      }
      if (res.data.lastyeardata) {
        res.data.lastyeardata.forEach(item => {
          ndcldb_y_1.value[parseInt(item.month - 1)] = (item.cnt / 10000).toFixed(2)
        })
      }

      ndcldbOpt.value.series[0].data = ndcldb_y_1.value
      ndcldbOpt.value.series[1].data = ndcldb_y_2.value
      ndcldbChart.setOption(ndcldbOpt.value)
    }
  }

  

}

/**
 * 节假日车流分析
 */
async function getRigth1Data() {
  //1.查询节假日信息
  const result = await ajaxRequest('post', 'getHolidays', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      jjrclfx_navs.value[index] = {
        name:item.express,
        holidaytypeid:item.holidaytypeid,
        //默认查询第一个节日数据
        selected:index===0
      }
      //默认查询第一个节日数据
      if(index === 0){
        //根据节假日查询车流
        getJjrclfx(item.holidaytypeid)
      }
    })
  }
}

/**
 * 根据节假日查询车流
 */
async function getJjrclfx(holidaytypeid) {
  const params = {
    compid:curServer.value[1],
    areacode: areacode.value,
    holidaytypeid : holidaytypeid
  }
  jjrclfx_x.value = []
  jjrclfx_y_1.value = []
  jjrclfx_y_2.value = []
  const res = await ajaxRequest('post', 'getJjrclfx', params)
  if (res.data) {
    if(res.data.thisyear && res.data.thisyear.length>0){
      res.data.thisyear.forEach((item,index)=>{
        jjrclfx_x.value[index] = item.ts
        jjrclfx_y_2.value[index] = (item.cnt/10000).toFixed(2)
      })
    }
    if(res.data.lastyear && res.data.lastyear.length>0){
      res.data.lastyear.forEach((item,index)=>{
        jjrclfx_x.value[index] = item.ts
        jjrclfx_y_1.value[index] = (item.cnt/10000).toFixed(2)
      })
    }
  }
  // jjrclfxOpt.value.legend.data = jjrclfx_legend.value
  jjrclfxOpt.value.xAxis[0].data = jjrclfx_x.value
  // jjrclfxOpt.value.series[0].name = jjrclfx_legend.value[0]
  jjrclfxOpt.value.series[0].data = jjrclfx_y_1.value
  // jjrclfxOpt.value.series[1].name = jjrclfx_legend.value[1]
  jjrclfxOpt.value.series[1].data = jjrclfx_y_2.value
  jjrclfxChart.setOption(jjrclfxOpt.value)
}
/**
 * 服务区车流量排行（前10）
 */
async function getRigth2Data() {
  fwqcllph_x.value = []
  fwqcllph_y.value = []
  const params = {
    page :  1,
    limit : 10,
    compid:curServer.value[1],
    areacode: areacode.value
    ,validatecode : validatecode.value
  }
  const res = await ajaxRequest('post', 'getFwqclph', params)
  if (res.data) {
    if(res.data && res.data.length > 0){
      res.data.forEach((item,index)=>{
        fwqcllph_x.value[index] = item.compname
        fwqcllph_y.value[index] = (item.cnt/10000).toFixed(2)
      })
    }
  }
  fwqcllphOpt.value.xAxis.data = fwqcllph_x
  fwqcllphOpt.value.series.data = fwqcllph_y
  fwqcllphChart.setOption(fwqcllphOpt.value)
}

/**
 * 当前车流饱和度排行（前10）
 */
async function getRigth3Data() {
  const params = {
    page :  1,
    limit : 10,
    type:99,//dqclbhdph_code.value,
    compid:curServer.value[1],
    areacode: areacode.value
  }
  dqclbhdph_x.value=[]
  dqclbhdph_y.value=[]
  const res = await ajaxRequest('post', 'getDqclbhdph', params)
  if (res.data) {
    if(res.data && res.data.length > 0){

      res.data.forEach((item,index)=>{
        dqclbhdph_x.value[index] = item.compname
        dqclbhdph_y.value[index] = (item.bhd *100).toFixed(2)
      })
      dqclbhdphOpt.value.xAxis.data = dqclbhdph_x
      dqclbhdphOpt.value.series[0].data = dqclbhdph_y
    }
  }
  dqclbhdphChart.setOption(dqclbhdphOpt.value)
}

/**
 * 获取车流总数（中间显示）
 */
async function getClzsData() {
  const params = {
    position :  carFlowOptions.value.position,
    compid:curServer.value[1],
    areacode: areacode.value
    ,validatecode : validatecode.value
  }
  carFlowOptions.value.carFlowNum = "0"
  const res = await ajaxRequest('post', 'getClzs', params)
  if (res.data) {
    if(res.data && res.data.length > 0){
      carFlowOptions.value.carFlowNum = (res.data[0].cnt/10000).toFixed(2) + ""
    }
  }
}

/**
 * 获取平均停留时间
 */
async function getPjtlsjData() {
  const params = {
    compid:curServer.value[1],
    areacode: areacode.value
    ,validatecode : validatecode.value
  }
  const res = await ajaxRequest('post', 'getPjtlsj', params)
  state.ratioData.pjtlsj = "0分钟"
  if(res.data && res.data.pjtlsj_zt){
    state.ratioData.pjtlsj = (res.data.pjtlsj_zt*2/3).toFixed(0)+"分钟"
    // if(res.data.pjtlsj_qt && res.data.pjtlsj_qt > 0){
    //   let tb = ((res.data.pjtlsj_zt - res.data.pjtlsj_qt)/res.data.pjtlsj_qt*100).toFixed(2)
    //   state.ratioData.pjtlsj_tb = tb
    // }
  }
}

/**
 * 获取销售额
 */
 async function getDcgxd() {
  const params = {
    position :  0,
    compid:curServer.value[1],
    areacode: areacode.value
    ,validatecode : validatecode.value
  }

   const res = await ajaxRequest('post', 'getDcgxd', params)
   state.ratioData.dcgxd =0
  if (res.data && res.data.xse && res.data.cl) {
    //单车贡献度
    state.ratioData.dcgxd = (res.data.xse/res.data.cl).toFixed(2)
  }
}
</script>
<style scoped>
.yz-select-server{
  display: flex;
  justify-content: space-between;
  padding-bottom: 2vh;
}
.yz-box-items{
  display: flex;
  box-shadow: inset 0 0 18px 1px rgba(0,255,255,0.59);
  .yz-box-item{
    display: flex;
    align-content:center;

    .yz-box-item-text{
      width: 46px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      cursor: pointer;
    }
    .yx-box-item-selected{
      background: #35CB9C;
      color: white;
    }
  }
}

.yx-xs-6{
  display: flex;
  width: 50%;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  .yx-car-item{
    width: 60px;
    height: 60px;
  }
  .car{
    background-image: url("../assets/img/yztraffic/小客车.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .bus{
    background-image: url("../assets/img/yztraffic/大客车.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .smallChart{
    background-image: url("../assets/img/yztraffic/小货车.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .bigChart{
    background-image: url("../assets/img/yztraffic/大货车.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .otherCar{
    background-image: url("../assets/img/yztraffic/其他.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .whp{
    background-image: url("../assets/img/yztraffic/危化品.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .yx-car-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
    .yx-car-content-text{
      font-size: 1.4vh;
      span{
        font-size: 1vh;
        color: #46BFCA;
      }
    }
    .yx-car-content-num{
      padding-top: 2px;
      font-size: 1.8vh;
      font-weight: bolder;
    }
  }
}




.map_info_title {
  margin-bottom: 1.5vh;
  font-size: 1.3vh;
  background: url("../assets/img/public/形状 866.png") no-repeat;
  background-size: 100% 100%;
  width: 12vh;
  height: 2vh;
  line-height: 2vh;
  text-align: center;
}

.block_select_contain >>> .el-input__wrapper {
  background-color: unset !important;
  color: #05132b;
  box-shadow: 0 0 0 1px #00EAFF inset;
}

.map-legend {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;

  .map-legend-item {
    display: flex;
    margin-bottom: 1vh;
    margin-right: 2vh;
    font-size: 1.4vh;
    cursor: pointer;

    span {
      padding-left: 1vh;
      position: relative;
      top: 5px;
    }
  }
}


.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 12px;
  right: 1.4vh;
  top: 4.5vh;
  z-index: 1000;
  .yz-common-title-nav {
    color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
    font-style: normal;
    border-right: 1px solid #ffffff;

  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      border-bottom: 2px solid #3DBDC8;
    }
  }
}
.top2{
  top: 1vh;
}
.yz-box2-items{
  display: flex;
  .yz-box2-item{
    border: 2px solid rgba(0,234,255,0.22);
    margin-right: 1vh;
    padding: 0.5vh;
    position: relative;
    border-radius: 1vh;
    .yz-box2-p{
      display: flex;
      justify-content: center;
      .down{
        background: url("../assets/img/yztraffic/down.png") no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100%;
        position: relative;
        top: 4px;
        margin: 0 1vh;
        padding-bottom: 1vh;
      }
      .up{
        background: url("../assets/img/yztraffic/up.png") no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100%;
        position: relative;
        top: 4px;
        margin: 0 1vh;
        padding-bottom: 1vh;
      }
    }
    .center{
      font-size: 1.4vh;
    }
  }
}

.yz-bottom{
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  .yz-bottom-navs{
    display: flex;
    background: rgba(26,75,83,0.48);
    border: 1px solid rgba(0,234,255,0.51);
    box-shadow: inset 0 0 12px 6px rgba(0,234,255,0.50);
    border-radius: 10px 10px 0 0;
    padding-right: 1vh;
    .yz-box-nav{
      cursor: pointer;
      .icon{
        width: 36px;
        text-align: center;
        padding-top: 1.5vh;
      }
    }
  }
}


.nums, .rate {
  pointer-events: none;
}

</style>
